<template>
	<div class="hot">
		<recommend :movielist="RatedMovies" :title="Title" v-if="RatedMovies.length>0"></recommend>
		<van-loading size="24px" v-else class="top">加载中...</van-loading>
		<movie-list :moviesinfo=" MoviesInfoList" v-if="MoviesInfoList.length>0"></movie-list>
		<van-loading size="24px" v-else class="bottom">加载中...</van-loading>
	</div>
</template>


<script>
	// 引入组件
	import Recommend from '@/components/Recommend.vue'
	import MovieList from '@/components/MovieList.vue'

	export default {
		data() {
			return {
				RatedMovies: [],
				Title: '',
				MoviesInfoList: [],
			}
		},
		created() {
			this.getRatedMovies();
			this.getMoviesInfoList();

		},
		mounted() {},
		methods: {
			// 获取最受好评电影的前六条数据
			async getRatedMovies() {
				let res = await this.axios.get('index/topRatedMovies')
				// console.log(res)
				this.RatedMovies = res.movieList
				this.Title = res.title
			},
			// 获取热映列表
			async getMoviesInfoList() {
				let res = await this.axios.get('index/movieOnInfoList')
				// console.log(res)
				this.MoviesInfoList = res.movieList

			},


		},
		// 注册组件
		components: {
			Recommend,
			MovieList
		},
	}
</script>

<style lang="less" scoped>
	.hot {
		margin-top: 96px;
		margin-bottom: 48px;
		position: relative;

		.top,
		.bottom {
			position: absolute;
			left: 135px;
		}

		.top {
			top: 50px;
		}
		
		.bottom{
			top: 315px;
		}
	}
</style>
